<template>
  <div class="app-container datav-container flex mb15">
    <div class="flex item one column">
      <div class="flex item column mr15 mb15">
        <div class="flex item column datav-box box-4">
          <div class="box-header flex col-top mb15">
            <span class="title">景区预约总数排行</span>
          </div>
          <div class="box-cont flex item one">
            <div class="table-box flex item one column">
              <div class="table-header flex col-center">
                <span class="td flex row-center">排名</span>
                <span class="item one td">景区名称</span>
                <span class="td flex row-center">已预约数</span>
                <span class="td flex row-center">已入园数</span>
              </div>
              <div class="table-body flex item one column">
                <div
                  class="table-item flex col-center"
                  v-for="(item, index) in tableList"
                  :key="index"
                >
                  <span class="td flex row-center">
                    <div
                      class="num-icon flex col-center row-center"
                      :class="'icon-' + (index + 1)"
                      v-if="index < 3"
                    >
                      {{ index + 1 }}
                    </div>
                    <span v-else>{{ index + 1 }}</span>
                  </span>
                  <span class="item one td text-over">{{
                    item.scenicName
                  }}</span>
                  <span class="td flex row-center">{{ item.capacity }}</span>
                  <span class="td flex row-center">{{
                    item.reservationNum
                  }}</span>
                  <span class="td flex row-center">{{ item.scanNum }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="flex item column mr15 mb15">
        <div class="flex item column datav-box box-2">
          <div class="box-header flex col-top">
            <span class="title">7日预约和入园对比</span>
          </div>
          <div class="box-cont flex column item one">
            <ui-echarts
              :option="lineOne.option"
              :loading="lineOne.loading"
            ></ui-echarts>
          </div>
        </div>
      </div>
    </div>
    <div class="flex item one column">
      <div class="flex item column mr15 mb15">
        <div class="flex item column datav-box box-3">
          <div class="box-header flex col-top">
            <span class="title">地图总览</span>
          </div>
          <div class="box-cont flex item one column">
            <div class="total-box flex">
              <div class="flex item one total-layout">
                <div class="total-item flex item col-center">
                  <span class="title">总预约数</span>
                  <span class="num color1 fw700">
                    {{ total.reservationTotalNum }}
                  </span>
                </div>
              </div>
              <div class="flex item one total-layout">
                <div class="total-item flex item col-center">
                  <span class="title">总入园数</span>
                  <span class="num color2 fw700">{{
                    total.reservationScanNum
                  }}</span>
                </div>
              </div>
            </div>
            <div class="map-box item one">
              <ui-echarts
                :option="map.option"
                :loading="map.loading"
              ></ui-echarts>
            </div>
            <div class="year-select">
              <el-select
                v-model="dateMode"
                placeholder="请选择"
                @change="dateChange"
                size="mini"
              >
                <el-option
                  v-for="item in dateOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
          </div>
        </div>
      </div>
      <div class="flex item column mr15 mb15">
        <div class="flex item column datav-box box-2">
          <div class="box-header flex col-top">
            <span class="title">本日预约时段统计</span>
          </div>
          <div class="box-cont flex column">
            <div class="ratio-bar-header flex column">
              <div class="flex">
                <div class="flex column item one">
                  <div class="title">当日预约总数</div>
                  <div class="flex num col-bottom">
                    <span class="num-n">{{ recordTimeAnalyze.totalNum }}</span>
                    <span class="num-t">人预约</span>
                  </div>
                </div>
                <div class="flex column">
                  <div class="title">当日入园人数</div>
                  <div class="flex num col-bottom">
                    <span class="num-n">{{
                      recordTimeAnalyze.scanedTotalNum
                    }}</span>
                    <span class="num-t">人入园</span>
                  </div>
                </div>
              </div>
              <div class="ratio-bar flex">
                <div
                  class="ratio-bar-item"
                  :class="'item-' + (index + 1)"
                  :style="'width:' + item.per + '%'"
                  v-for="(item, index) in recordTimeAnalyze.list"
                  :key="index"
                ></div>
              </div>
            </div>
            <div class="ratio-list flex column">
              <div
                class="ratio-list-item flex col-center"
                v-for="(item, index) in recordTimeAnalyze.list"
                :key="index"
              >
                <div class="ratio-icon" :class="'item-' + (index + 1)"></div>
                <div class="ratio-text-1 item one">{{ item.name }}</div>
                <div class="ratio-text-2 item one flex row-right">
                  {{ item.num }}人
                </div>
                <div class="ratio-text-3 item one flex row-right">
                  {{ item.per }}%
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="flex item one column">
      <div class="flex item column mb15">
        <div class="flex item column datav-box box-5">
          <div class="box-header flex col-top">
            <span class="title">游客画像</span>
          </div>
          <div class="box-cont flex item one column portrayal scroll-y">
            <div class="flex item one column portrayal-item">
              <div class="title">游客年龄占比</div>
              <div class="flex item one">
                <ui-echarts-pie
                  :option="pieOne.option"
                  :loading="pieOne.loading"
                ></ui-echarts-pie>
              </div>
            </div>
            <div class="flex item one column portrayal-item">
              <div class="title">游客来源地</div>
              <div class="flex item one">
                <ui-echarts-pie
                  :option="pieTwo.option"
                  :loading="pieTwo.loading"
                ></ui-echarts-pie>
              </div>
            </div>
            <div class="flex item column portrayal-item">
              <div class="title">是否携带老人小孩</div>
              <div class="ratio-bar-header flex column portrayal-ratio">
                <div class="ratio-bar flex">
                  <div
                    class="ratio-bar-item item-1"
                    :style="'width:' + carryData.yes + '%'"
                  ></div>
                  <div
                    class="ratio-bar-item item-3"
                    :style="'width:' + carryData.no + '%'"
                  ></div>
                </div>
              </div>
              <div class="portrayal-ratio-text flex">
                <div class="flex item one row-left">
                  <span class="text-left">携带：{{ carryData.yes }}%</span>
                </div>
                <div class="flex item one row-right">
                  <span class="text-right">未携带：{{ carryData.no }}%</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="flex item column mb15">
        <div class="flex item column datav-box box-2">
          <div class="box-header flex col-top">
            <span class="title">旅游资源统计</span>
          </div>
          <div class="box-cont flex column item one">
            <ui-echarts-pie
              :option="travelResource.option"
              :loading="travelResource.loading"
            ></ui-echarts-pie>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts/lib/echarts.js'
import dayjs from "dayjs";

import UiEcharts from "@/components/reservation/ui-echarts.vue";
import UiEchartsPie from "@/components/reservation/ui-echarts-pie.vue";
import config from "@/components/reservation/echarts.config.js";

import cityJson from "@/assets/cityJson.json";
export default {
  components: { UiEcharts, UiEchartsPie },
  mixins: [config],
  data() {
    return {
      date: [],
      dateMode: "year",
      dateOptions: [
        {
          value: "year",
          label: "近一年"
        },
        {
          value: "month",
          label: "近一月"
        },
        {
          value: "week",
          label: "近一周"
        },
        {
          value: "day",
          label: "当日"
        }
      ],

      tableList: [],
      recordTimeAnalyze: {
        totalNum: 0,
        scanedTotalNum: 0,
        list: []
      },
      total: {
        reservationTotalNum: 0,
        reservationScanNum: 0,
        visitNum: 0
      },
      map: {
        option: {},
        loading: false
      },
      lineOne: {
        option: {},
        loading: false
      },
      pieOne: {
        option: {},
        loading: false
      },
      pieTwo: {
        option: {},
        loading: false
      },
      carryData: {
        yes: 0,
        no: 0
      },
      travelResource: {
        option: {},
        loading: false
      }
    };
  },
  mounted() {
    //注册地图
    echarts.registerMap("cityJson", cityJson);
    //初始化日期
    this.date = this.getDate("year");
    //批量请求
    this.batchLoad();
    //本日预约时段统计
    this.getRecordTimeAnalyze();
    //7日预约和入园对比
    this.getNearly7DayData();
  },
  methods: {
    dateChange(mode) {
      this.date = this.getDate(mode);
      this.batchLoad();
    },
    getDate(mode) {
      if (mode === "year") {
        let startDate = new Date().setFullYear(new Date().getFullYear() - 1);
        return [
          dayjs(new Date(startDate)).format("YYYY-MM-DD"),
          dayjs(new Date()).format("YYYY-MM-DD")
        ];
      }
      if (mode === "month") {
        let startDate = new Date().setMonth(new Date().getMonth() - 1);
        return [
          dayjs(new Date(startDate)).format("YYYY-MM-DD"),
          dayjs(new Date()).format("YYYY-MM-DD")
        ];
      }
      if (mode === "week") {
        let startDate = new Date().setDate(new Date().getDate() - 7);
        return [
          dayjs(new Date(startDate)).format("YYYY-MM-DD"),
          dayjs(new Date()).format("YYYY-MM-DD")
        ];
      }
      if (mode === "day") {
        return [
          dayjs(new Date()).format("YYYY-MM-DD"),
          dayjs(new Date()).format("YYYY-MM-DD")
        ];
      }
    },
    batchLoad() {
      //地图总览
      this.getMapData();
      //景区预约总数排行
      this.getScenicReservationRankData();
      //游客画像
      this.getTouristPortraitData();
      // 旅游资源统计
      this.getTravelResource();
    },
    // 7日预约和入园对比
    getNearly7DayData() {
      this.lineOne.loading = true;
      this.$POST("sot-admin-api/reservation/visual-statistics/queryNearly7DayData", {})
        .then(res => {
          let data = {
            xLabel: [],
            data: [
              {
                name: "预约",
                data: []
              },
              {
                name: "入园",
                data: []
              }
            ]
          };
          if (res.data && res.data.length > 0) {
            res.data.map((item, index) => {
              data.xLabel.push(item.name);
              data.data[0].data.push({
                value: item.reservationNum
              });
              data.data[1].data.push({ value: item.scanNum });
            });
          }
          this.lineOne.option = this.$$line().pro(data);
        })
        .finally(_ => {
          this.lineOne.loading = false
        });

      // this.lineOne.loading = true;
      // let res = {"errorCode":"00000","message":"成功","data":[{"name":"17日","reservationNum":0,"scanNum":0},{"name":"18日","reservationNum":0,"scanNum":0},{"name":"19日","reservationNum":0,"scanNum":0},{"name":"20日","reservationNum":0,"scanNum":0},{"name":"21日","reservationNum":0,"scanNum":0},{"name":"22日","reservationNum":0,"scanNum":0},{"name":"23日","reservationNum":0,"scanNum":0}]}
      // let data = {
      //   xLabel: [],
      //   data: [
      //     {
      //       name: "预约",
      //       data: []
      //     },
      //     {
      //       name: "入园",
      //       data: []
      //     }
      //   ]
      // };
      // if (res.data && res.data.length > 0) {
      //   res.data.map((item, index) => {
      //     data.xLabel.push(item.name);
      //     data.data[0].data.push({
      //       value: item.reservationNum
      //     });
      //     data.data[1].data.push({ value: item.scanNum });
      //   });
      // }
      // this.lineOne.option = this.$$line().pro(data);
      // this.lineOne.loading = false;
    },

    getScenicReservationRankData() {
      this.$POST("sot-admin-api/reservation/visual-statistics/queryScenicReservationRankData", {
        beginDate: this.date[0],
        endDate: this.date[1]
      }).then(res => {
        this.tableList = res.data;
      });

      // let res =  {"errorCode":"00000","message":"成功","data":[{"scenicName":"露营景区233","limitNum":60158,"capacity":null,"reservationNum":7,"scanNum":7},{"scenicName":"婺源文化与生态旅游区","limitNum":60000,"capacity":null,"reservationNum":3,"scanNum":3},{"scenicName":"月亮湖-露营基地（预约）","limitNum":60000,"capacity":null,"reservationNum":3,"scanNum":3},{"scenicName":"黄山博物馆","limitNum":60000,"capacity":null,"reservationNum":3,"scanNum":2},{"scenicName":"石龙洞-露营基地（预约+购票）","limitNum":60000,"capacity":null,"reservationNum":3,"scanNum":3},{"scenicName":"505景区1","limitNum":60000,"capacity":null,"reservationNum":2,"scanNum":2},{"scenicName":"龟峰风景名胜区","limitNum":60000,"capacity":null,"reservationNum":2,"scanNum":2},{"scenicName":"505测试驿站","limitNum":60000,"capacity":null,"reservationNum":1,"scanNum":1},{"scenicName":"505测试乡村","limitNum":60000,"capacity":null,"reservationNum":1,"scanNum":1},{"scenicName":"506测试乡村","limitNum":60000,"capacity":null,"reservationNum":1,"scanNum":1}]}
      // this.tableList = res.data;

    },
    // 本日预约时段统计
    getRecordTimeAnalyze() {
      this.$POST("sot-admin-api/reservation/statistics/reservationRecordTimeAnalyze", {}).then(res => {
        this.recordTimeAnalyze.totalNum = res.data.totalNum || 0;
        //this.recordTimeAnalyze.scanedTotalNum = res.data.scanedTotalNum || 0;
        if (res.data.scanedItem && res.data.scanedItem.length > 0) {
          let total = 0;
          res.data.scanedItem.map((item, index) => {
            total += item.scanedNum;
          });
          res.data.scanedItem.map((item, index) => {
            this.recordTimeAnalyze.list.push({
              name: item.name,
              num: item.scanedNum,
              per:
                total > 0
                  ? Number(((item.scanedNum / total) * 100).toFixed(2))
                  : 0
            });
          });
          this.recordTimeAnalyze.scanedTotalNum = total || 0;
        }
      });


      // let res = {"errorCode":"00000","message":"成功","data":{"totalNum":0,"scanedTotalNum":0,"scanedItem":[{"name":"上午时段 08:00-12:00","percent":0.0,"scanedNum":0},{"name":"下午时段 12:00-18:00","percent":0.0,"scanedNum":0},{"name":"夜间时段 18:00-22:00","percent":0.0,"scanedNum":0}]}}

      // this.recordTimeAnalyze.totalNum = res.data.totalNum || 0;
      // //this.recordTimeAnalyze.scanedTotalNum = res.data.scanedTotalNum || 0;
      // if (res.data.scanedItem && res.data.scanedItem.length > 0) {
      //   let total = 0;
      //   res.data.scanedItem.map((item, index) => {
      //     total += item.scanedNum;
      //   });
      //   res.data.scanedItem.map((item, index) => {
      //     this.recordTimeAnalyze.list.push({
      //       name: item.name,
      //       num: item.scanedNum,
      //       per:
      //         total > 0
      //           ? Number(((item.scanedNum / total) * 100).toFixed(2))
      //           : 0
      //     });
      //   });
      //   this.recordTimeAnalyze.scanedTotalNum = total || 0;
      // }

    },

    // ABC(){
    //    let res= {"errorCode":"00000","message":"成功","data":{"total":{"reservationTotalNum":18,"reservationScanNum":17,"visitNum":0},"areaDataList":null}}
    //     //统计
    //     if (res.data.total) {
    //       this.total.reservationTotalNum =
    //         res.data.total.reservationTotalNum || 0;
    //       this.total.reservationScanNum =
    //         res.data.total.reservationScanNum || 0;
    //       this.total.visitNum = res.data.total.visitNum || 0;
    //     } 
    // },

    // BCD(){
    //   this.map.loading = true;
    //   const res= {
    //     "errorCode":"00000",
    //     "message":"成功",
    //     "data":{
    //         "total":null,
    //         "areaDataList":[
    //             {
    //                 "cityCode":"511302000000",
    //                 "cityName":"顺庆区",
    //                 "reservationNum":7,
    //                 "scanNum":7
    //             },
    //             {
    //                 "cityCode":"511303000000",
    //                 "cityName":"高坪区",
    //                 "reservationNum":6,
    //                 "scanNum":5
    //             },
    //             {
    //                 "cityCode":"511304000000",
    //                 "cityName":"嘉陵区",
    //                 "reservationNum":5,
    //                 "scanNum":5
    //             },
    //             {
    //                 "cityCode":"511321000000",
    //                 "cityName":"南部县",
    //                 "reservationNum":0,
    //                 "scanNum":0
    //             },
    //             {
    //                 "cityCode":"511322000000",
    //                 "cityName":"营山县",
    //                 "reservationNum":0,
    //                 "scanNum":0
    //             },
    //             {
    //                 "cityCode":"511323000000",
    //                 "cityName":"蓬安县",
    //                 "reservationNum":0,
    //                 "scanNum":0
    //             },
    //             {
    //                 "cityCode":"1324000000",
    //                 "cityName":"仪陇县",
    //                 "reservationNum":0,
    //                 "scanNum":0
    //             },
    //             {
    //                 "cityCode":"511325000000",
    //                 "cityName":"西充县",
    //                 "reservationNum":0,
    //                 "scanNum":0
    //             },
    //             {
    //                 "cityCode":"511381000000",
    //                 "cityName":"阆中市",
    //                 "reservationNum":0,
    //                 "scanNum":0
    //             },
    //         ]
    //     }
    //   }
    //   //地图
    //   if (res.data.areaDataList && res.data.areaDataList.length > 0) {
    //     let data = [];
    //     res.data.areaDataList.map((item, index) => {
    //       data.push({
    //         name: item.cityName,
    //         value: item.reservationNum,
    //         scanNum: item.scanNum
    //       });
    //     });
    //     this.map.option = this.$$map({
    //       total: this.total.reservationTotalNum
    //     }).basics(data);
    //   }
    //   this.map.loading = false;
    // },
    
    getMapData() {
      this.$POST("sot-admin-api/reservation/visual-statistics/queryMapDataTotal", {
        beginDate: this.date[0],
        endDate: this.date[1]
      }).then(res => {
        //统计
        if (res.data.total) {
          this.total.reservationTotalNum =
            res.data.total.reservationTotalNum || 0;
          this.total.reservationScanNum =
            res.data.total.reservationScanNum || 0;
          this.total.visitNum = res.data.total.visitNum || 0;
        }
      });
      // this.ABC()

      this.map.loading = true;
      this.$POST("sot-admin-api/reservation/visual-statistics/queryMapDataArea", {
        beginDate: this.date[0],
        endDate: this.date[1]
      })
      .then(res => {
        //地图
        if (res.data.areaDataList && res.data.areaDataList.length > 0) {
          let data = [];
          res.data.areaDataList.map((item, index) => {
            data.push({
              name: item.cityName,
              value: item.reservationNum,
              scanNum: item.scanNum
            });
          });
          this.map.option = this.$$map({
            total: this.total.reservationTotalNum
          }).basics(data);
        }
      })
      .finally(_ => {
        this.map.loading = false;
      });
      // this.BCD()
    },
    
    // _aaa(){
    //   this.pieOne.loading = true;
    //   let res = {"errorCode":"00000","message":"成功","data":{"ageDataList":[{"name":"60岁以上","number":1,"percent":0.1},{"name":"50-59岁","number":1,"percent":0.1},{"name":"60岁以上","number":1,"percent":0.1},{"name":"0-19岁","number":2,"percent":0.2},{"name":"20-39岁","number":3,"percent":0.3},{"name":"40-49岁","number":0,"percent":0.0},{"name":"50-59岁","number":1,"percent":0.1},{"name":"60岁以上","number":1,"percent":0.1}],"orginDataList":null,"carryDataList":null}}
    //   //游客年龄占比
    //   if (res.data.ageDataList && res.data.ageDataList.length > 0) {
    //     let data = [];
    //     res.data.ageDataList.map((item, index) => {
    //       data.push({
    //         name: item.name,
    //         value: item.number,
    //         percent: Number((item.percent * 100).toFixed(2))
    //       });
    //     });
    //     this.pieOne.option = this.$$pie().basics(data);
    //     this.pieOne.loading = false;
    //     console.log('this.pieOne.option',JSON.stringify(this.pieOne.option))
    //   }
    // },
    // _bbb(){
    //   let res = {"errorCode":"00000","message":"成功","data":{"ageDataList":null,"orginDataList":[{"name":"贵州省","number":3,"percent":0.14285714285714285},{"name":"贵州省","number":3,"percent":0.14285714285714285},{"name":"贵州省","number":3,"percent":0.14285714285714285},{"name":"重庆市","number":1,"percent":0.047619047619047616},{"name":"重庆市","number":1,"percent":0.047619047619047616},{"name":"黑龙江省","number":1,"percent":0.047619047619047616},{"name":"黑龙江省","number":1,"percent":0.047619047619047616},{"name":"其他","number":2,"percent":0.09523809523809523},{"name":"湖南省","number":1,"percent":0.047619047619047616},{"name":"其他","number":2,"percent":0.09523809523809523},{"name":"福建省","number":1,"percent":0.047619047619047616},{"name":"其他","number":2,"percent":0.09523809523809523}],"carryDataList":null}}
      
    //   //游客来源地
    //   if (res.data.orginDataList && res.data.orginDataList.length > 0) {
    //     let data2 = [];
    //     res.data.orginDataList.map((item, index) => {
    //       data2.push({
    //         name: item.name,
    //         value: item.number,
    //         percent: Number((item.percent * 100).toFixed(2))
    //       });
    //     });
    //     this.pieTwo.option = this.$$pie().basics(data2);
    //   }
    // },
    // _ccc(){
    //   let res = {"errorCode":"00000","message":"成功","data":{"ageDataList":null,"orginDataList":null,"carryDataList":[{"name":"携带","number":7,"percent":0.05303030303030303},{"name":"携带","number":7,"percent":0.05303030303030303},{"name":"携带","number":7,"percent":0.05303030303030303},{"name":"未携带","number":37,"percent":0.2803030303030303},{"name":"未携带","number":37,"percent":0.2803030303030303},{"name":"未携带","number":37,"percent":0.2803030303030303}]}}

    //   if (res.data.carryDataList && res.data.carryDataList.length > 0) {
    //     this.carryData.yes = Number(
    //       (res.data.carryDataList[0].percent * 100).toFixed(2)
    //     );
    //     this.carryData.no = Number(
    //       (res.data.carryDataList[1].percent * 100).toFixed(2)
    //     );
    //   } 
    // },

    getTouristPortraitData() {
      this.$POST("sot-admin-api/reservation/visual-statistics/queryAgePortraitData", {
        beginDate: this.date[0],
        endDate: this.date[1]
      }).then(res => {
        //游客年龄占比
        if (res.data.ageDataList && res.data.ageDataList.length > 0) {
          let data = [];
          res.data.ageDataList.map((item, index) => {
            data.push({
              name: item.name,
              value: item.number,
              percent: Number((item.percent * 100).toFixed(2))
            });
          });
          this.pieOne.option = this.$$pie().basics(data);
        }
      });
      // this._aaa()

      this.$POST("sot-admin-api/reservation/visual-statistics/queryOrginPortraitData", {
        beginDate: this.date[0],
        endDate: this.date[1]
      }).then(res => {
        //游客来源地
        if (res.data.orginDataList && res.data.orginDataList.length > 0) {
          let data2 = [];
          res.data.orginDataList.map((item, index) => {
            data2.push({
              name: item.name,
              value: item.number,
              percent: Number((item.percent * 100).toFixed(2))
            });
          });
          this.pieTwo.option = this.$$pie().basics(data2);
        }
      });
      // this._bbb()

      this.$POST("sot-admin-api/reservation/visual-statistics/queryCarryPortraitData", {
        beginDate: this.date[0],
        endDate: this.date[1]
      }).then(res => {
        if (res.data.carryDataList && res.data.carryDataList.length > 0) {
          this.carryData.yes = Number(
            (res.data.carryDataList[0].percent * 100).toFixed(2)
          );
          this.carryData.no = Number(
            (res.data.carryDataList[1].percent * 100).toFixed(2)
          );
        }
      });
      // this._ccc()
    },

    getTravelResource() {
      this.$POST("sot-admin-api/reservation/visual-statistics/travelResource", {
        beginDate: this.date[0],
        endDate: this.date[1]
      }).then(res => {
        //游客来源地
        if (res.data && res.data.length > 0) {
          let data = [];
          res.data.map((item, index) => {
            data.push({
              name: item.name,
              value: item.count,
              percent: Number((item.percent * 100).toFixed(2))
            });
          });
          this.travelResource.option = this.$$pie2().basics(data);
        }
      });

      // let res ={"errorCode":"00000","message":"成功","data":[{"name":"景区","count":4,"percent":0.0388},{"name":"场馆","count":2,"percent":0.0194},{"name":"乡村","count":2,"percent":0.0194},{"name":"攻略","count":35,"percent":0.3398},{"name":"文化","count":8,"percent":0.0777},{"name":"美食","count":2,"percent":0.0194},{"name":"商品","count":50,"percent":0.4854}]}
      // //游客来源地
      // if (res.data && res.data.length > 0) {
      //   let data = [];
      //   res.data.map((item, index) => {
      //     data.push({
      //       name: item.name,
      //       value: item.count,
      //       percent: Number((item.percent * 100).toFixed(2))
      //     });
      //   });
      //   this.travelResource.option = this.$$pie2().basics(data);
      // }

    }
  }
};
</script>

<style lang="scss" scoped>
$item-1: #215ee8;
$item-2: #4fd8df;
$item-3: #fdb000;

.datav-container {
  width: 100%;
  height: calc( 100vh - 100px);
  padding-bottom: 20px;
  background: #f7f8fa;
  box-sizing: border-box;
  overflow: auto;

  .datav-box {
    background: #ffffff;
    border-radius: 6px;

    .box-header {
      height: 28px;
      margin-top: 20px;
      font-size: 16px;
      font-weight: bold;
      color: #215ee8;

      &:before {
        content: "";
        display: inline-block;
        width: 4px;
        height: 20px;
        background: #215ee8;
      }

      .title {
        margin-left: 18px;
      }
    }

    .box-cont {
      padding: 0 25px;
      color: #797979;
    }

    &.box-1 {
      //width: 375px;
      height: 350px;
    }

    &.box-2 {
      height: 320px;
    }

    &.box-3 {
      height: 585px;
    }

    &.box-4 {
      height: 585px;
    }

    &.box-5 {
      height: 585px;
    }
  }

  .ratio-bar-header {
    .title {
      color: #a7aeb6;
      font-size: 12px;
      margin-top: 17px;
    }

    .num {
      color: #676767;
      margin-top: 5px;
      margin-bottom: 10px;

      .num-n {
        font-size: 40px;
        margin-right: 5px;
      }

      .num-t {
        font-size: 12px;
        margin-bottom: 5px;
      }
    }

    .ratio-bar {
      height: 5px;
      width: 100%;

      .ratio-bar-item {
        display: inline-block;
        height: 100%;

        &.item-1 {
          background: $item-1;
        }

        &.item-2 {
          background: $item-2;
        }

        &.item-3 {
          background: $item-3;
        }
      }
    }
  }

  .ratio-list {
    margin-top: 18px;
    font-size: 12px;

    .ratio-list-item {
      color: #676767;
      height: 50px;
      border-bottom: 1px solid #eaeff2;

      &:last-child {
        border-bottom: none;
      }

      .ratio-icon {
        width: 14px;
        height: 14px;
        border-radius: 3px;
        margin-right: 5px;

        &.item-1 {
          background: $item-1;
        }

        &.item-2 {
          background: $item-2;
        }

        &.item-3 {
          background: $item-3;
        }
      }

      .ratio-text-1 {
      }

      .ratio-text-2 {
        color: #a7aeb6;
      }

      .ratio-text-3 {
        color: #a7aeb6;
      }
    }
  }

  .total-box {
    margin-top: 20px;

    .total-layout {
      height: 53px;
      padding-left: 15px;
      background: #f3f5f9;

      &:last-child {
        margin-left: 15px;
      }
    }

    .total-item {
      color: #666666;

      .title {
        font-size: 14px;
      }

      .num {
        color: #333333;
        margin-left: 25px;
        font-size: 30px;

        &.color1 {
          color: #1377ff;
        }

        &.color2 {
          color: #fcaf00;
        }

        &.fw700 {
          font-weight: 700;
        }

        .num-n {
          font-size: 30px;
          margin-right: 5px;
        }

        .num-t {
          font-size: 12px;
          margin-bottom: 5px;
        }
      }

      .sub {
        font-size: 12px;

        .sub-n {
          margin-left: 5px;
          color: #215ee8;
        }
      }
    }
  }

  .year-select {
    width: 90px;
    height: 30px;
    position: absolute;
    bottom: 20px;
    right: 20px;
  }

  .table-box {
    font-size: 12px;

    .table-header {
      height: 36px;
      color: #797979;
      font-weight: bold;
    }

    .table-body {
      .table-item {
        height: 36px;

        &:nth-of-type(odd) {
          background: #f8f8f8;
        }

        .num-icon {
          width: 22px;
          height: 22px;
          border-radius: 2px;
          color: #ffffff;

          &.icon-1 {
            background: #215ee8;
          }

          &.icon-2 {
            background: #5d8fff;
          }

          &.icon-3 {
            background: #a8c2fd;
          }
        }
      }
    }

    .td {
      &:nth-child(1) {
        width: 50px;
        margin-right: 20px;
      }

      &:nth-child(2) {
        width: 100px;
      }

      &:nth-child(3) {
        width: 90px;
        margin-left: 5px;
      }

      &:nth-child(4) {
        width: 90px;
        margin-left: 5px;
      }

      &:nth-child(5) {
        width: 90px;
        margin-left: 5px;
      }
    }
  }

  .portrayal {
    .portrayal-item {
      margin-top: 20px;
      border-bottom: 1px solid #eaeff2;
    }

    .title {
      color: #a7aeb6;
      font-size: 12px;
    }

    .portrayal-ratio {
      margin-top: 10px;
    }

    .portrayal-ratio-text {
      margin-top: 10px;
      margin-bottom: 10px;
      font-size: 12px;

      .text-left {
        color: #215ee8;
      }

      .text-right {
        color: #fdb000;
      }
    }
  }

  ::v-deep ul {
    margin: 0;
    padding: 0;
  }

  ::v-deep p {
    margin: 0;
    padding: 0;
  }

  .mr15 {
    margin-right: 15px;
  }

  .mb15 {
    margin-bottom: 15px;
  }

  .text-over {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
</style>
